<template>
  <div class="app-container">
    <div class="form-box">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-tabs type="border-card" class="form-tabs">
          <el-tab-pane label="基础信息" class="form-tabs-tab-pane">
            <!-- 变量名 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('dictionaryItems.name')"
                  prop="name"
                >
                  <el-input v-model="form.name" :placeholder="$t('common.pleaseFill')+$t('dictionaryItems.name')" />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 变量值 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('dictionaryItems.value')"
                  prop="value"
                >
                  <el-input v-model="form.value" :placeholder="$t('common.pleaseFill')+$t('dictionaryItems.value')" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 发布状态 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('common.status')"
                  prop="status"
                >
                  <el-select
                    v-model="form.status"
                    :placeholder="$t('common.pleaseSelect')+$t('common.status')"
                    clearable
                  >
                    <el-option label="已发布" value="1" />
                    <el-option label="未发布" value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>

        <el-row :gutter="20" type="flex" justify="center" class="btn-row">
          <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">{{ $t('common.submit') }}</el-button>
              <el-button @click="resetForm">{{ $t('common.reset') }}</el-button>
              <el-button @click="onCancel">{{ $t('common.cancel') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
// export
export default {
  name: 'DictionaryItemEdit',
  components: {},
  data() {
    return {
      form: {
        id: 0,
        dictionary_id: 0,
        name: '',
        value: undefined,
        status: ''
      },
      // 表单输入校验 ，通过prop="name"属性进行控制
      rules: {
        name: [{ required: true, message: '请填写变量名', trigger: 'blur' }],
        value: [{ required: true, message: '请填写变量值', trigger: 'blur' }]
      },
      // 路由参数
      routerParams: {}
    }
  },
  computed: {},
  created() {
    this.routerParams = this.$route.params
    const { id, did } = this.routerParams
    this.id = id
    this.dictionary_id = did
    this.getDetail()
  },
  methods: {
    /** *********************************************** 表单相关 开始 ******************************************************/
    // 内容详情
    async getDetail() {
      if (this.id > 0) {
        // 请求内容接口：数据不存在报异常则关闭当前标签返回上一页
        // 请求附件接口
      }
    },
    // 提交表单
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 请求内容接口
          console.log(this.form)
          this.$message.success('提交!')
        } else {
          this.$message.error('提交失败!')
          return false
        }
      })
    },
    // 取消/返回
    onCancel() {
      // 删除当前页标签并返回上一页
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
      // this.$message.info('已取消！')
    },
    // 表单重置
    resetForm() {
      this.$refs['form'].resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
</style>
